/* 整体左上角布局 */
*
{
    padding: 0px;
    margin: 0px;
}

/* 顶端样式 */
#head,#foot
{
    height: 100px;
    width: 100%;
    background-color: rgb(112, 112, 247);
}

#head-logo
{
    width: 900px;
    background-color: red;
}

/* 底部样式 */
#foot
{
    position: absolute;
    bottom: 0px;
    height: 200px;
    background-color: rgb(243, 250, 250);
}
/* 页面主体部分边框样式 */
#middle {
}
/*头部图片*/
#head-logo img{
    width:100%;
    height:100%;
}
/* 页面主体部分边框样式 */
#middle {
    /* border: 1px black solid; */
    height: 550px;
    width: 900px;
    margin: 0px auto;
    margin-top: 30px;
    /* 清除浮动 */
    /* border: black 1px solid; */
    overflow: hidden;
}



#middle div.grid-cell-1
{
    /* border: 1px black solid; */
    border-radius: 15px;
    overflow: hidden;
}

/* 左侧图片样式设置 */
#imglogo
{
    height: 390px;
    /* width: 90%; */
    /* width: 500px; */
    overflow: hidden;
    /* background-image: url("imges/拼车首页图.png"); */
    /* border: black 1px solid; */
    float: left;
    /* position: relative; */
}
#imglogo img
{
    max-width: 100%;
        max-height: 100%;
        display: block;
        margin: auto;
    /* border: black 1px solid; */
}
/* 登录文体外观 */
#Appearance-style
{
    height: 80px;
    /* border: 1px black solid; */
    width: 100%;
    line-height: 80px;
    margin-left: 4px;
}
/* 两条斜杠 */
.Appearance-style-one
{
    width: 387px;
    height: 1px;
    background-color: rgb(224, 226, 226);
    margin-top: 40px;
}
/* 登录文本样式 */
.Appearance-style-two
{
    font-size: 30pt;
    margin-left: 20px;
    margin-right: 20px;
    /* border: 1px solid black; */
}
/* 左侧图片 */
#middle-centen img
{
    height: 600px;
    width: 410px;
}

/* 中间细线 */
#middle-centen-hr
{
    width: 1px;
    background-color: rgb(224, 226, 226);
    margin-left: 38px;
    height: 350px;
}
/* 右边文本输入部分 */
#middle-centen-Right
{
    /* border: 1px black solid; */
    margin-left: 38px;
    width: 350px;
    height: 400px;
}

/* 输入边框样式 */
.middle-centen-Right-type
{
    border: solid 1px gray;
    height: 40px;
    width: 96%;
    font-size: 10pt;
    border-radius: 5px;
    color: black;
    padding-left: 10px;
    /* border-radius: 1px; */
}

/* 输入框获得焦点事件 */
.middle-centen-Right-type:focus,#Code:focus
{
    /* border: 1px solid rgb(189, 183, 183); */
    /* 取消选中时的黑色边框 */
    outline:none;
    animation-name:Input-focus;
    animation-duration: 0.5s;
    animation-fill-mode:forwards;  
}
/*输入框动画 */
@keyframes Input-focus
{
    from{}
    to{border: 1px rgb(9, 156, 201) solid;}
}

/* 验证码边框样式 */
#Code {
}
#CheckBox1{
    height:18px;
}
/* 验证码边框样式 */
#Code {
    /* border: 1px black solid; */
    height: 40px;
    font-size: 10pt;
    color: black;
    width: 58%;
    border: 1px gray solid;
    border-radius: 5px;
    padding-left: 10px;
}
/* 错误提示框的样式 */
#middle-centen-Right label
{
    color: rgb(245, 60, 131);
    display: block;
    height: 40px;
    line-height: 40px;
    font-size: 10pt;
}

/* 登录按钮 */
#denglu
{
    width: 80%;
    height: 40px;
    font-size: 12pt;
    border-radius: 5px;
    border: 1px solid rgb(80, 80, 224);
    background-color: rgb(70, 146, 233);
    color: white;
    margin-top: 40px;
    margin-left: 36px;
}
/* 验证码按钮 */
#Code-button
{
    margin-left: 35px;
    height: 40px;
    width: 100px;
}



/* 超链接文本 */
#middle-centen-Right a {
    text-decoration: none;
    color: rgb(70, 146, 233);
}
    #denglu:hover {
        animation-name: Regi;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }

/* 验证码按钮 */
#Code-button {
    margin-left: 35px;
    height: 40px;
    width: 100px;
    border: 1px rgb(9, 156, 201) solid;
    border-radius: 5px;
    color: white;
    background-color: rgb(9, 156, 201);
}

#Code-button:hover{
    animation-name: Regi;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

#Code-button {
    outline: none;
}

/* 按钮动画 */
@keyframes Regi {
    from {
    }
    to {
        background: rgb(37, 187, 233);
        border: rgb(37, 187, 233);
    }
}


#check-box {

    display:none;
}

    #check-box + label {
        /* margin-right: 10px; */
        display: inline;
        width: 15px;
        height: 15px;
        cursor: pointer;
        border: 1px solid rgb(175, 175, 175);
        border-radius: 3px;
        /* position: absolute; */
        /* top: 2px;
    left: 15px; */
        overflow:hidden;
        background: rgb(253, 253, 253);
    }

#check-box:checked + label::before {
    border: none;
    position:absolute;
    background: rgb(9, 156, 201);
    border-radius: 2px;
    content: "\2714";
    text-align: center;
    line-height:16px;
    width:16px;
    height: 16px;
    font-size: 10px;
    color: white;
}

#check-box:checked + label {
    border: 1px solid rgb(9, 156, 201);
}
#agreement {
    position:relative;
}
/* 超链接文本 */
#middle-centen-Right a {
    text-decoration: none;
    color: rgb(70, 146, 233);
    font-size: 10pt;
    margin-left: 75px;
}

/* 协议边框 */
div#deal {
    /* border: 1px black solid; */
    margin-left: 360px;
}
#UserPhoneMasgg, #UserPwdMasgg, #CodeMasgg {
    visibility:hidden;
}
/* 协议边框 */
div#deal {
    /* border: 1px black solid; */
    margin-left: 360px;
    margin-top: 30px;
}
#deal label,#deal a
{
    font-size: 10pt;

}
#deal label
{
    color: rgb(126, 128, 129);
}
#deal a
{
    color:  rgb(70, 146, 233);
    text-decoration: none;
}


/* 记住密码文本 */
#checkbotext
{
    margin-left: 10px;
    font-size: 10pt;
    color: rgb(96, 97, 99);
    display: inline;
}

/* 弹性布局 */
#Appearance-style,#middle-centen,#head
{
    display: flex;
}
.grid-cell-1
{
    flex: 1;
}
.grid-cell-2
{
    flex: 2;
}
.grid-cell-3
{
    flex: 3;
}